import styles from './dome.module.less';
import { employeeItem } from './types/index';

function App() {
  const arr: Array<employeeItem> = [
    {
      name: '李帅',
      sex: '男',
      home: '上海',
      position: '产品经理',
      department: '产品设计中心',
      phone: '123456789',
      seniority: 3,
      qualifying: {
        status: '正式',
        color: '#8ee079',
      },
      id: 1,
    },
    {
      name: '胡健',
      sex: '男',
      home: '北京',
      position: '产品经理',
      department: '产品设计中心',
      phone: '123456789',
      seniority: 2,
      qualifying: {
        status: '离职',
        color: '#dfdfdf',
      },
      id: 2,
    },
    {
      name: '张拉娜',
      sex: '女',
      home: '成都',
      position: '产品经理',
      department: '产品设计中心',
      phone: '123456789',
      seniority: 5,
      qualifying: {
        status: '兼职',
        color: '#f1be6e',
      },
      id: 3,
    },
    {
      name: '田晓雅',
      sex: '女',
      home: '成都',
      position: '设计总监',
      department: '产品设计中心',
      phone: '123456789',
      seniority: 5,
      qualifying: {
        status: '试用',
        color: '#90bbed',
      },
      id: 4,
    },
    {
      name: '吴菲菲',
      sex: '女',
      home: '成都',
      position: '产品经理',
      department: '产品设计中心',
      phone: '123456789',
      seniority: 7,
      qualifying: {
        status: '试用',
        color: '#90bbed',
      },
      id: 5,
    },
    {
      name: '曾城',
      sex: '男',
      home: '北京',
      position: '产品经理',
      department: '产品设计中心',
      phone: '123456789',
      seniority: 5,
      qualifying: {
        status: '实习',
        color: '#ecb6b6',
      },
      id: 6,
    },
    {
      name: '许倩倩',
      sex: '女',
      home: '浙江',
      position: '设计总监',
      department: '产品设计中心',
      phone: '123456789',
      seniority: 1,
      qualifying: {
        status: '临时',
        color: '#d3a2f0',
      },
      id: 7,
    },
    {
      name: '周小琴',
      sex: '女',
      home: '北京',
      position: '产品经理',
      department: '产品设计中心',
      phone: '123456789',
      seniority: 5,
      qualifying: {
        status: '应聘',
        color: '#95e3e9',
      },
      id: 8,
    },

  ]

  return (
    <div className={ styles.container_card }>
      {
        arr.map(item => <div key={ item.id } className={ styles.container_card_item }>
          <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202102%2F05%2F20210205114339_bjjly.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672205241&t=7f7db628ad621fcf4121e64031e8d263"/>
          <div>
            <div className={ styles.container_name }>
              <span className={ styles.name }>{ item.name }</span>
              <span>{ item.position }</span>
            </div>
            <div>
              <span>{ item.department }</span>
            </div>
            <div>
              单位工龄：<span className={ styles.year }>
                <span>{ item.seniority }</span>年
              </span>
              <span className={ styles.sex }>{ item.sex }</span>
              <span className={ styles.city }>{ item.home }</span>
            </div>
            <div>
              电话：<span>{ item.phone }</span>
            </div>
          </div>
          <div className={ styles.circle }>
            <div style={{ backgroundColor: `${ item.qualifying.color }` }}>{ item.qualifying.status }</div>
          </div>
        </div>)
      }
    </div>
  )
}

export default App
